import React, { Component } from 'react'
// 使用仓库store中的数据
// 使用仓库store的步骤
// 01: 引入store仓库
// 02: 获取仓库中的数据 store.getState()
// 03: 修改数据 store,.dispatch({type:'标识'})
// 04: 当store中的数据发生变化, 则触发监听器 store.subscribe(()=>{ 重新订阅})

import store from '../../store'
console.log('store', store);
// const state = store.getState()
// console.log('state', state);
export default class Father extends Component {
    constructor() {
        super()
        this.state = {
            ...store.getState(),
            tit: '哈哈哈'
        }

        // 当store 仓库中的数据发生变化后, 需要重新订阅store 中的数据
        store.subscribe(() => {
            console.log('listen');
            this.setState({
                ...store.getState()
            })
        })

    }
    // state = {
    //     ...store.getState(),
    //     tit: '哈哈哈'
    // }
    render() {
        const { count, num, userinfo } = this.state
        return (
            <div>
                <p>
                    <button onClick={() => {
                        // 派发任务去修改store中的state
                        store.dispatch({ type: '+' })
                    }}>+1</button>
                    store-count:{count}
                    <button onClick={() => {
                        // 派发任务去修改store中的state
                        store.dispatch({ type: '-', payload: 10 })
                    }}>-10</button>
                </p>
                <p>store-num:{num}</p>
            </div>
        )
    }
}
